AJAX (Asynchronous JavaScript and XML) একটি ওয়েব প্রযুক্তি, যা ক্লায়েন্ট এবং সার্ভারের মধ্যে অ্যাসিঙ্ক্রোনাস ডেটা আদান-প্রদান করতে ব্যবহৃত হয়। এটি ওয়েব পৃষ্ঠাকে রিফ্রেশ না করে ডেটা ফেচ এবং প্রদর্শন করতে সহায়তা করে। পিএইচপি (PHP) এবং MySQL দিয়ে ডেটা ফেচ করার সময় AJAX ব্যবহার করলে ব্যবহারকারীর অভিজ্ঞতা উন্নত হয় এবং পৃষ্ঠার রিফ্রেশ ছাড়াই ডেটা লোড করা সম্ভব হয়।
এখানে পিএইচপি এবং AJAX ব্যবহার করে ডেটা ফেচ করার একটি উদাহরণ দেখানো হয়েছে।
১. MySQL টেবিল তৈরি করা
ধরা যাক, আমাদের একটি users টেবিল রয়েছে, যেখানে ব্যবহারকারীর নাম এবং ইমেইল ঠিকানা সংরক্ষিত থাকে।
MySQL Query: টেবিল তৈরি করা
CREATE DATABASE user_data;
USE user_data;
CREATE TABLE users (
id INT AUTO_INCREMENT PRIMARY KEY,
username VARCHAR(50),
email VARCHAR(100)
);
-- কিছু ডেটা ইনসার্ট করা
INSERT INTO users (username, email) VALUES
('John Doe', 'john@example.com'),
('Jane Smith', 'jane@example.com'),
('Robert Brown', 'robert@example.com');
২. PHP: ডেটাবেস থেকে ডেটা ফেচ করা
এখন, পিএইচপি স্ক্রিপ্ট লিখে মাইএসকিউএল ডেটাবেস থেকে ডেটা ফেচ করা হবে। এই ডেটা আমরা AJAX কলের মাধ্যমে ক্লায়েন্ট সাইডে পাঠাবো।
PHP: fetch_data.php (ডেটা ফেচ করার স্ক্রিপ্ট)
<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "user_data";
// MySQL সংযোগ
$conn = new mysqli($servername, $username, $password, $dbname);
// সংযোগ চেক করা
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// SQL কুয়েরি
$sql = "SELECT id, username, email FROM users";
$result = $conn->query($sql);
$data = [];
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
$data[] = $row; // ডেটা অ্যারের মধ্যে সংরক্ষণ
}
}
// JSON আউটপুট
echo json_encode($data);
$conn->close();
?>
$conn->query(): MySQL কুয়েরি চালানোর জন্য ব্যবহৃত।json_encode(): PHP অ্যারে বা অবজেক্টকে JSON ফরম্যাটে কনভার্ট করে।
৩. AJAX কল এবং ডেটা প্রদর্শন করা (HTML + JavaScript)
এখন, HTML এবং JavaScript ব্যবহার করে AJAX কল পাঠানো হবে এবং ডেটা প্রদর্শন করা হবে।
HTML এবং JavaScript: index.html (AJAX কল এবং ডেটা প্রদর্শন)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PHP MySQL AJAX Data Fetch</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- jQuery লাইব্রেরি -->
</head>
<body>
<h2>ব্যবহারকারীদের তথ্য</h2>
<div id="user_data"></div> <!-- এখানে ডেটা দেখানো হবে -->
<script>
// AJAX কলের মাধ্যমে ডেটা ফেচ করা
$(document).ready(function() {
$.ajax({
url: 'fetch_data.php', // PHP স্ক্রিপ্টের ইউআরএল
type: 'GET',
dataType: 'json', // রেসপন্স JSON ফরম্যাটে আশা করছি
success: function(data) {
var html = '<table border="1"><tr><th>ID</th><th>Username</th><th>Email</th></tr>';
// ডেটা টেবিল আকারে প্রদর্শন
$.each(data, function(index, user) {
html += '<tr>';
html += '<td>' + user.id + '</td>';
html += '<td>' + user.username + '</td>';
html += '<td>' + user.email + '</td>';
html += '</tr>';
});
html += '</table>';
$('#user_data').html(html); // HTML এ ডেটা প্রদর্শন
},
error: function(xhr, status, error) {
console.log("Error: " + error); // যদি কিছু ত্রুটি ঘটে
}
});
});
</script>
</body>
</html>
$.ajax(): jQuery এর AJAX ফাংশন যা সার্ভার থেকে ডেটা ফেচ করতে ব্যবহৃত।url: PHP স্ক্রিপ্টের পাথ।type: HTTP মেথড, এখানে 'GET' ব্যবহার করা হয়েছে।dataType: সার্ভার থেকে পাওয়া রেসপন্সের ফরম্যাট, এখানেjson।success: সার্ভার থেকে ডেটা পাওয়ার পর কার্যক্রম।error: কোনো ত্রুটি হলে কার্যক্রম।
৪. ফলাফল
যখন আপনি index.html পৃষ্ঠা ব্রাউজারে খুলবেন, তখন AJAX কলের মাধ্যমে fetch_data.php স্ক্রিপ্টটি সার্ভারে যাবে এবং users টেবিলের ডেটা JSON আকারে রিটার্ন করবে। সেই JSON ডেটা JavaScript দ্বারা প্রসেস করে একটি HTML টেবিলের আকারে প্রদর্শিত হবে।
সারাংশ
PHP এবং AJAX ব্যবহার করে ডেটা ফেচ করার পদ্ধতি সহজ, দ্রুত এবং ব্যবহারকারী বান্ধব। AJAX ব্যবহার করলে পৃষ্ঠা রিফ্রেশ ছাড়াই ডেটা আপডেট এবং প্রদর্শন করা যায়, যা ব্যবহারকারীর অভিজ্ঞতা উন্নত করে। এই পদ্ধতিতে, পিএইচপি ব্যবহার করে ডেটাবেস থেকে ডেটা ফেচ করে AJAX এর মাধ্যমে ক্লায়েন্ট সাইডে প্রদর্শন করা হয়।
Read more
